
$(function () {
    /**日期选择 **/
    Vue.component('ymd',{
        props: ["ymd"],
        data: function() {
            return {
                date: {
                    y: "",
                    m: "",
                    d: ""
                },
                select_m: ["1","2","3","4","5","6","7","8","9","10","11","12"],
                display: false,
                indexYear: 0,
                view: "default"
            }
        },
        template: '<div class="field">' +
                    '<label>日期</label>'+
                    '<div class="date">'+
                        '{{ymd}}' +
                        '<span v-on:click="display=true"><i class="calculator icon"></i></span>'+
                        '<div class="calendar"  v-show="display">'+
                            '<div class="calendar-header">' +
                                '<div class="default" v-if="view == \'default\'">' +
                                    '<div class="year">' +
                                        '<i class="caret left icon" v-on:click="date.y--"></i>' +
                                        '<span v-on:click="view = \'select-year\'">{{date.y}}年</span>' +
                                        '<i class="caret right icon" v-on:click="date.y++"></i>' +
                                    '</div>' +
                                    '<div class="month">' +
                                        '<i class="caret left icon" v-on:click="date.m--"></i>' +
                                        '<span v-on:click="view = \'select-month\'">{{date.m}}月</span>' +
                                        '<i class="caret right icon" v-on:click="date.m++"></i>' +
                                    '</div>' +
                                '</div>' +
                                '<div class="select year"  v-if="view == \'select-year\'">' +
                                    '<i class="caret left icon" v-on:click="indexYear = indexYear-10"></i>' +
                                    '<span>{{indexYear}}年~{{indexYear+9}}年</span>' +
                                    '<i class="caret right icon" v-on:click="indexYear = indexYear+10"></i>' +
                                '</div>'+
                                '<div class="select month" v-if="view == \'select-month\'">' +
                                    '<span>{{date.m}}月</span>' +
                                '</div>'+
                            '</div>'+
                            '<div class="calendar-body">'+
                                '<div class="default" v-if="view == \'default\'">' +
                                    '<div class="week">'+
                                        '<div class="item">日</div>'+
                                        '<div class="item">一</div>'+
                                        '<div class="item">二</div>'+
                                        '<div class="item">三</div>'+
                                        '<div class="item">四</div>'+
                                        '<div class="item">五</div>'+
                                        '<div class="item">六</div>'+
                                    '</div>'+
                                    '<div class="day">'+
                                        '<div v-bind:class="{active:item == date.d,null:item == \'\'}" v-for="item in day" ' +
                                        'track-by="$index" v-on:click="iClick(item)" class="item">{{item}}</div>'+
                                    '</div>' +
                                '</div>'+
                                '<div class="select year" v-if="view == \'select-year\'">' +
                                    '<div class="item" v-bind:class="{active:item == date.y}" ' +
                                    'v-for="item in yearGround" track-by="$index" v-on:click="date.y = item , view=\'default\' ">{{item}}</div>' +
                                '</div>' +
                                '<div class="select month" v-if="view == \'select-month\'">' +
                                    '<div class="item" v-bind:class="{active:item == date.m}" ' +
                                    'v-for="item in select_m" v-on:click="date.m = item ,view=\'default\' " track-by="$index">{{item}}</div>' +
                                '</div>' +
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>',
        computed: {
            day: function() {
                var self = this;
                var select_d = [];
                var i = 0;
                var Count = new Date(self.date.y,self.date.m ,0).getDate();
                var week = new Date(self.date.y,self.date.m - 1,1).getDay();
                for(; i < week; i++) {
                    select_d.push("");
                }
                for(i = 1; i <= Count; i++) {
                    select_d.push(i);
                }

                i = select_d.length > 35 ?  42 - select_d.length : 35 - select_d.length;
                for(; i > 0; i--) {
                    select_d.push("");
                }
                return select_d;
            },
            yearGround: function() {
                var yearGround = [];
                var flag = this.indexYear;
                if(flag >= 0) {
                    for(;flag <= this.indexYear+9; flag++) {
                        yearGround.push(flag);
                    }
                }
                return yearGround;
            }
        },
        mounted: function() {
            var date = new Date();
            this.date.y = date.getFullYear();
            this.date.m = date.getMonth() + 1;
            this.date.d = date.getDate();
            this.indexYear = this.date.y - this.date.y%10;
        },
        methods: {
            iClick: function(item) {
                this.date.d = item;
                this.ymd = this.$root.params.date = this.date.y + "-" +this.date.m + "-" +this.date.d;
                this.display = false;
            }
        },
        watch : {
            "date.m" : function() {
                if(this.date.m < 1) {
                    this.date.m = 1;
                }else if(this.date.m >= 12) {
                    this.date.m = 12;
                }
            },
            "date.y" : function() {
                if(this.date.y < 1) {
                    this.date.y = 1;
                }
                this.indexYear = this.date.y - this.date.y%10;
            },
        }
    });

    /** 栏目模块 **/
    Vue.component('module',{
        props: ['class_id'],
        data: function() {
            return {
                data:[],
                classId: ""
            }
        },
        template: '<div class="field">' +
                    '<label>栏目名称</label>' +
                    '<select v-model="classId" class="ui fluid dropdown">' +
                        '<option v-for="item in data" :value="item.id">{{item.name}}</option>' +
                    '</select>' +
                '</div>',
        mounted: function () {
            this.find_module_name();
        },
        methods: {
            find_module_name: function () {
                var self = this;
                $.ajax({
                    url: rootPath+"/content/find-model-name" ,
                    type : 'get',
                    dataType: "json",
                    success: function (result) {
                        if(result.status) {
                            self.data = result.data.items;
                            self.classId = self.class_id;
                        }else {
                            header.Popup("alert",result.error,"");
                        }
                    }
                });
            }
        },
        watch: {
            "classId": function(news,old) {
                this.$root.params.classId = news;
                this.$root.getPhotosById(news);
            }
        }
    });
    new Vue({
        el: '#right',
        data: {
            params:{
                classId: '',
                date:  '',
                eq: '>',
                photos: [
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""},
                    {name:"",photoUrl:"",contentUrl:""}
                ]
            },
            img_select: "img_1",
            count_1: 0,
            count_2: 0,
            errcode: 0
        },
        created: function() {
            Vue.set(this.params,"classId",window.location.hash != "" ? window.location.hash.substr(1) : "");
        },
        watch: {
            "img_select": function() {
                this.count_2 = this.img_select.split('_')[1] - 1;
            }
        },
        methods: {
            save: function() {
                var self = this;
                var url = rootPath + (self.errcode == 1?  "/module/create-photos-change" :  '/module/update-photos-change');
                var Data = {};
                for(var key in self.params) {
                    if(key == "photos") {
                        for(var i = 0; i < self.params[key].length; i++) {
                            if(self.params[key][i].photoUrl) {
                                Data["obj.Photos["+i+"].PhotoUrl"] = self.params[key][i].photoUrl;
                            }
                            if(self.params[key][i].contentUrl) {
                                Data["obj.Photos["+i+"].ContentUrl"] = self.params[key][i].contentUrl;
                            }
                            if(self.params[key][i].name) {
                                Data["obj.Photos["+i+"].Name"] = self.params[key][i].name;
                            }
                        }
                        delete i;
                    } else {
                        Data['obj.'+ key.substr(0,1).toUpperCase() + key.substr(1)]  = self.params[key];
                    }
                }
                delete key;
                $.ajax({
                    url: url,
                    data: Data,
                    type: 'post',
                    dataType: 'json',
                    success: function(result) {
                        if(result.status){
                            header.Popup("alert","操作成功",function(){
                                window.location.href = rootPath + "/module";
                            });
                        } else {
                            header.Popup("alert",result.error,"");
                        }
                    }
                });
            },
            clear: function(id) {
                var element = "img_"+(id+1);
                var self = this;
                $.ajax({
                    url: rootPath+"/img/delete?img_url="+self.params.photos[id].photoUrl.substr(1),
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        $('#'+element).val("");
                        self.params.photos[id].photoUrl = "";
                        header.Popup("alert",data.msg,"");
                    }
                });
            },
            select: function(id) {
                $('#'+"img_"+id).click();
            },
            change: function(e) {
                e = e || window.event;
                var obj = e.target || e.srcElement;
                var imgSize = 0;
                var reader = new FileReader();
                if (this.isIE && !obj.files) {
                    var filePath = obj.value;
                    var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
                    var file = fileSystem.GetFile(filePath);
                    imgSize = file.Size;
                } else {
                    imgSize = obj.files[0].size;
                }
                if ((imgSize / 1024) > 5000) {
                    header.Popup("alert","附件不能大于5M","");
                    obj.value = "";
                    return  false;
                }
                var name = obj.value;
                var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
                if (fileName != "jpg" && fileName != "jpeg" && fileName != "pdf" && fileName != "png" ) {
                    header.Popup("alert","请选择图片格式文件上传(jpg,png,gif,gif等)！","");
                    obj.value = "";
                    return
                }
                reader.readAsDataURL(obj.files[0]);
                reader.onload = function () {
                    $('.img_thumb').find(".item").eq($(obj).index("[type=file]")).find("img").attr("src",reader.result);
                };
            },
            upload: function(id) {
                var self = this;
                var fileElementId = "img_" + (id+1);
                if($('#'+fileElementId).val() == ""){
                    header.Popup("alert","上传图片不能为空!!!!","");
                    return ;
                }
                $.ajaxFileUpload({
                    url: rootPath+'/img?img_id='+fileElementId+"&img_url="+self.params.photos[id].photoUrl,
                    secureuri: false,
                    fileElementId: fileElementId,
                    type:'post',
                    success: function(data) {
                        var dataStr = $(data).find("body").text();//获取返回的字符串
                        var dataJson = $.parseJSON(dataStr);//把字符串转化为json对象
                        if(dataJson.status) {
                            var callback = function(){
                                self.params.photos[id].photoUrl = dataJson.data.path.replace(/\\/g, "/");
                                $('.img_thumb').find(".item").eq(id).find("img").attr('src',rootPath+self.params.photos[id].photoUrl);
                                $('#'+fileElementId).change(self.change);
                            };
                            header.Popup("alert","上传成功",callback);
                        } else {
                            header.Popup("alert",dataJson.error,"");
                        }
                    }
                });
            },
            url: function(url) {
                return rootPath + (typeof url == "undefined" ||  url == ""?  "/common/img/white.jpg" :  url);
            },
            /** 获取轮播图片组 **/
            getPhotosById: function(id) {
                var self = this;
                $.ajax({
                    url: rootPath + '/module/get-photos-change-by-id',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(result) {
                        for(var i = 0; i <= self.params.photos.length; i++) {
                            for(var key in self.params.photos[i]) {
                                self.params.photos[i][key] = "";
                            }
                        }
                        if(result.status) {
                            if(typeof result.data.errcode != "undefined"){
                                self.errcode = 1;
                                header.Popup("alert",result.data.errmsg,"");
                            } else {
                                for(key in result.data) {
                                    if(key != "photos") {
                                        self.params[key] = result.data[key];
                                    } else {
                                        for(i in result.data[key]) {
                                            Vue.set(self.params[key],i,result.data[key][i]);
                                        }
                                        delete i ;
                                    }
                                }
                                delete key;
                            }
                            window.location.href="#"+id;
                        } else {
                            header.Popup("alert",result.error,"");
                        }
                    }
                });
            }
        }
    });
});
